import { useState, useEffect } from 'react'
import { GlobalStyle, Tab, TabItem } from './style'
import { Spin, Tabs } from 'antd'
import { createGlobalStyle } from 'styled-components'
import ContestItem from './components/ContestItem'
import ContestList from './components/ContestList'
import ContestTab from './components/ContestTab'
import classNames from "classnames"
import WeUI from 'react-weui'
import './App.css'

const {
  Toast
} = WeUI


function App() {
  const [loading, setLoading] = useState(true);
  const [activeKey, setActiveKey] = useState('all');
  const [query, setQuery] = useState('') // 做筛选
  const onSetQuery = (query) => {
    console.log(query)
    setQuery(query)
  }
  const select = (tab) => {
    setActiveKey(tab);
  }
  useEffect(() => {
    // useEffect 不只是做生命周期的onload，还可以做更新事件
    // 当[activeKey, query]发生改变，useEffect执行显示更新
    // setLoading(true)
    setTimeout(() => {
      setLoading(false);
    }, 1000)
    // console.log('当[activeKey, query]发生改变useEffect执行更新')
  }, [activeKey])
  // useEffect(() => {
  //   // onload/update
  //   setLoading(true)
  // }, [activeKey])

  return (
    <>
      <GlobalStyle></GlobalStyle>
      <h2 className='title'>热门赛事</h2>
      <Tab>
        <a onClick={select.bind(null, 'all')} className={activeKey == 'all' ? 'active' : ''}>
          <TabItem>
            <span>全部</span>
          </TabItem>
        </a>
        <a onClick={select.bind(null, 'dj')} className={activeKey == 'dj' ? 'active' : ''}>
          <TabItem>
            <span>电竞赛事</span>
          </TabItem>
        </a>
        <a onClick={select.bind(null, 'sport')} className={activeKey == 'sport' ? 'active' : ''}>
          <TabItem>
            <span>体育赛事</span>
          </TabItem>
        </a>
      </Tab>
      {/* <Toast show={loading} icon="loading">加载中...</Toast> */}
      <Spin spinning={loading} tip='加载中~'>
        {loading}
      </Spin>
    </>
  )
}

export default App
